<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <style>
        .w {

            /* 1.主轴属性设置 flex 布局的外边距值不会重叠 */
            /* 给父添加flex 属性 默认让 X轴是（主轴） 排列 */
            /* flex-direction: row;  默认值 y轴就是侧轴 从左到右排列子元素 */
            /* 元素跟着主轴排列 */
            /* flex-direction: row-reverse;  翻转 从右到左排列子元素 类似于右浮动 */

            /*  主轴设置为 Y轴  元素就是y向排列*/
            /* flex-direction: column;   Y轴排列元素   从上到下排列子元素    */
            /* flex-direction: column-reverse;  从下到上排列子元素 */

            /* flex-flow: row wrap; 简写 X主轴+换行 */


            /* 2.设置主轴上所有子元素的排列方式 */
            /* justify-content: flex-start;  如果主轴是X默认从左对齐 如果主轴是Y就是上对齐*/
            /* justify-content: flex-end;   如果主轴是X右对齐  如果主轴是Y就是下对齐*/
            /* justify-content: center;     居中对齐  如果主轴是x轴 就类似于 0 auto  如果主轴是Y轴就靠左中间位置  */
            /* justify-content: space-around;    间距相等，中间的距离是边缘的两倍 */
            /* justify-content: space-between;   先贴两边 中间剩余空间平分  **重点布局*** */
            /* justify-content: space-evenly;      平分空间 间距相等    */



            /* 3.是否换行显示，默认不换行 增加盒子会强制一行显示挤压其他子盒子大小*/
            /* flex-wrap: nowrap;  默认值不换行 */
            /* flex-wrap: wrap;    换行 */


            /* 4.设置单行侧轴的排列方式 如果X为主轴Y就是侧轴 如果Y为主轴X就是侧轴 */
            /* align-items: center;   侧轴居中 */
            /* align-items: flex-start;  X主轴侧轴上对齐   Y主轴侧轴左对齐 */
            /* align-items:flex-end;      X主轴侧轴下对齐   Y主轴侧轴右对齐*/
            /* align-items:stretch;     可以实现拉伸效果 如果是主轴是X轴不能设置高 如果是Y不能设置宽 */


            /* 5.多行侧轴对齐方式  align-center:*/

            /* align-content: center;   居中对齐 */
            /* align-content: flex-start; 上对齐  */
            /* align-content: flex-end;   下对齐 */
            /* align-content: space-around; 平分剩余空间  */
            /* align-content: space-between; 先贴两边 中间剩余空间平分  */
            /* align-content: stretch;   默认值平铺 */
            display: flex;
            /* justify-content: center; */



/* 
            display: flex;
            align-items: center;
            flex-direction: column;    元素在行内垂直居中显示 */
            /* align-content: flex-start; */
            flex-wrap: wrap;
            /* align-content: center;  */
            /* flex-wrap: wrap;
            flex-direction: row;      */
           
            /* flex-flow: column  wrap;  简写主轴为Y轴 换行 */
            /*主轴为 X*/
            background-color: #ccc;
            width: 600px;
            border:1px solid pink;
            /* height: 600px; */
            margin: 0 auto;
        }
        div {
            width: 100px;
            height: 100px;
            /* margin: 5px; */
            background-color: #fff;
            /* display:table-cell */
        }

        /* 子项属性  自适应盒子在父盒子 分配剩余空间 */
        /* 1. flex: 1;（1-10） 平分所有空间 */
        /* 2. */
        /* align-self:flex-end start;  那个子盒子添加单独移动位置  靠上*/
        /* align-self:flex-end end;   那个子盒子添加单独移动位置  靠下*/
        /* order 改变排列顺序 数值越小排大的约考前 可以是负数 */
        .box1 {
            /* flex: 1; */
            background-color: skyblue;
            /* width: 100px;
            height: 100px; */
            /* flex: 1; */

        }

        .box2 {
          
            /* flex: 1; */
            background-color: pink;
            /* width: 100px;
            height: 100px; */
        }

        .box3 {

            /* flex: 1; */
            background-color: orange;
            /* width: 100px;
            height: 100px; */
        }
    </style>
</head>

<body>
    <span class="w">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
    </span>
    <script>
        /*  1.主轴方向的使用: flex - direction;
             默认从左到右：flex - direction: row;
             从又到左对齐 ：flex - direction：row - reverse;
             从上到下对齐 ：flex - direction：column;
             从下到上对齐 ：flex - direction;

             2.主轴的对齐方式使用: justify - content修改;
             默认左对齐： justify - content：flax - start;
             右对齐: justify - content: flex - end;
             居中对齐： justify - content：center;
             两端对齐： justify - content：space - between;
             间距相等，中间的距离是边缘的两倍： justify - content：space - around;

             3.次轴的对齐方式使用: align - item  单行 修改;
             默认高度平铺100 %，子元素不能设置高度：align - item: stretch;
             上对齐：align - item: flex - start;
             下对齐：align - item：flex - end;
             居中对齐: align - item: center;

             4.主轴换行方式：（默认数不允许换行的，如果需要换行要加 flex - wrap: wrap 即可）;


             5，多行对齐的方式用：align - center;
             默认平铺：align - content: strecth;
             上对齐：align - content: flex - start;
             下对齐：align - content: flex - end;
             居中对齐：align - content: center;
             两端对齐：align - content: space - between;
             间距相同：align - content: space - around; */

    </script>

</body>

</html>